<template>
  <div class="control_box">
    <nav-bar bgc="#fff">
      <template #left>
        <go-back>
          <template>
            <img src="~assets/images/icon/goback.svg" alt />
          </template>
        </go-back>
      </template>
      <template #center>
        
          <input class="input" type="text" @keyup="input">
        
      </template>
      <template #right>
        <go-cart>
          <template>
            <img src="~assets/images/icon/cart.svg" alt="">
          </template>
        </go-cart>
      </template>

    </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/public/navbar/NavBar";
import GoBack from "components/public/goback/GoBack";
import GoCart from "components/public/gocart/GoCart";
export default {
  components: {
    NavBar,
    GoBack,
    GoCart
  },
  data(){
    return{
      inputBox:null
    }
    
  },
  methods:{
    input(e){
      let keyword = this.inputBox.value;
      if(!keyword.trim()){
        this.$bus.$emit('isNull')
        return
      }
      this.$bus.$emit('input',keyword)
    }
  },
  mounted(){
    let inputBox = document.querySelector('.input');
    this.inputBox = inputBox;
    
  }
};
</script>

<style lang="less" scoped>
  .input {
    border: none;
    padding: 6PX;
    height: 25PX;
    width: 100%;
    border-radius: 5PX;
    font-size: 12PX;
    background-color: #ccc;
  }
</style>